/* eslint-disable no-nested-ternary */
import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Table, Button, Spin } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import queryString from 'query-string';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';
import HdlRemark from '@/pages/components/HdlRemark';

const { Description } = DescriptionList;
@connect(({ loading, adjustdetail }) => ({
  loading: loading.models.adjustdetail,
  datailInfo: adjustdetail.datailInfo,
  updateBaseInfo: adjustdetail.datailInfo.updateBaseInfo || {},
}))
@Form.create()
class Problem extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      adjType: '',
    };
  }

  componentDidMount() {
    this.getDetail();
  }

  // 详情
  getDetail = () => {
    const { dispatch, location } = this.props;
    const { adjTaskId, adjType } = queryString.parse(location.search);
    this.setState({
      adjType,
    });
    const detailUrl = `/csApi/empSendAdjService/${
      adjType === '1'
        ? '/getAdjInsDetail'
        : adjType === '2'
        ? 'getAdjAccuDetail'
        : 'detail/change/quo'
    }`;
    dispatch({
      type: 'adjustdetail/fetchDetail',
      payload: { detailUrl, adjId: adjTaskId },
    });
  };

  render() {
    const { datailInfo, loading } = this.props;
    const { adjType } = this.state;
    const newProtInfoDto = [];
    if (datailInfo.protInfoDto) {
      newProtInfoDto.push(datailInfo.protInfoDto);
    }
    const newUpdateAccuLocPkg = [];
    if (datailInfo.updateAccuLocPkg) {
      datailInfo.updateAccuLocPkg.accoName = datailInfo.updateAccuLocPkg.accuAccoName;
      datailInfo.updateAccuLocPkg.insGrpName = datailInfo.updateAccuLocPkg.accuGrpName;
      newUpdateAccuLocPkg.push(datailInfo.updateAccuLocPkg);
    }
    const insGroupColumns = [
      {
        title: '险种',
        dataIndex: 'assName',
        width: '15%',
        align: 'center',
      },
      {
        title: '缴费方式',
        dataIndex: 'payWayName',
        width: '15%',
        align: 'center',
      },
      {
        title: '缴费账户',
        dataIndex: 'accoName',
        width: '40%',
        align: 'center',
        render: val => val || '--',
      },
      {
        title: adjType === '1' ? '社保组合' : '公积金组合',
        dataIndex: 'insGrpName',
        width: '30%',
        align: 'center',
        render: val => val || '--',
      },
    ];
    const quoAddColumns = [
      {
        title: '产品',
        dataIndex: 'pdName',
        align: 'center',
        width: '150px',
        render: val => val || '--',
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        align: 'center',
        width: '150px',
        render: val => val || '--',
      },
      {
        title: '执行方',
        dataIndex: 'execTypeName',
        align: 'center',
        width: '150px',
        render: val => val || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        align: 'center',
        width: '150px',
        sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      },
    ];
    const quoRedColumns = [
      {
        title: '产品',
        dataIndex: 'pdName',
        align: 'center',
        width: '150px',
        render: val => val || '--',
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        align: 'center',
        width: '150px',
        render: val => val || '--',
      },
      {
        title: '执行方',
        dataIndex: 'execTypeName',
        align: 'center',
        width: '150px',
        render: val => val || '--',
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        align: 'center',
        width: '150px',
        sorter: (a, b) => new Date(b.endDate) - new Date(a.endDate),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      },
    ];
    const quoPriceColumns = [
      {
        title: '产品',
        dataIndex: 'pdName',
        align: 'center',
        width: '150px',
        render: val => val || '--',
      },
      {
        title: '原价格',
        dataIndex: 'oldPrice',
        align: 'right',
        width: '150px',
        render: val => ((val || val === 0) && val) || '--',
      },
      {
        title: '新价格',
        dataIndex: 'newPrice',
        align: 'right',
        width: '150px',
        render: val => ((val || val === 0) && val) || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        align: 'center',
        width: '150px',
        sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      },
    ];
    const insAccuInfoColumns = [
      {
        title: '险种',
        dataIndex: 'assName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '缴费方式',
        dataIndex: 'payWayName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '缴费账户',
        dataIndex: 'accoName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '申报工资',
        dataIndex: 'decWage',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => ((val || val === 0) && val) || '--',
      },
      {
        title: '政策组合',
        dataIndex: 'grpName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
    ];
    return (
      <Spin spinning={loading} size="large">
        <PageHeaderWrapper>
          <Card title={<span style={{ fontWeight: 900 }}>派单信息</span>}>
            <Form>
              <DescriptionList>
                <Description term="签约方">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.senderId
                    ? datailInfo.updateBaseInfo.senderId
                    : '--'}
                </Description>
                <Description term="客户名称">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.custName
                    ? datailInfo.updateBaseInfo.custName
                    : '--'}
                </Description>
                <Description term="商务合同">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.custContName
                    ? datailInfo.updateBaseInfo.custContName
                    : '--'}
                </Description>
                <Description term="报价单">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.quoName
                    ? datailInfo.updateBaseInfo.quoName
                    : '--'}
                </Description>
                <Description term="派单时间">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.sendDate
                    ? moment(datailInfo.updateBaseInfo.sendDate).format('YYYY-MM-DD HH:MM')
                    : '--'}
                </Description>
                <Description term="所属客服">{datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.primName ? datailInfo.updateBaseInfo.primName : '--'}</Description>
                <Description term="创建人">{datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.creName ? datailInfo.updateBaseInfo.creName : '--'}</Description>
              </DescriptionList>
            </Form>
          </Card>
          <Card title={<span style={{ fontWeight: 900 }}>基本信息</span>}>
            <Form>
              <DescriptionList>
                <Description term="姓名">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.empName
                    ? datailInfo.updateBaseInfo.empName
                    : '--'}
                </Description>
                <Description term="证件类型">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.idTypeName
                    ? datailInfo.updateBaseInfo.idTypeName
                    : '--'}
                </Description>
                <Description term="证件号">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.idCode
                    ? datailInfo.updateBaseInfo.idCode
                    : '--'}
                </Description>
                <Description term="性别">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.genderName
                    ? datailInfo.updateBaseInfo.genderName
                    : '--'}
                </Description>
                <Description term="国籍">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.nationName
                    ? datailInfo.updateBaseInfo.nationName
                    : '--'}
                </Description>
                <Description term="出生日期">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.birthDate
                    ? moment(datailInfo.updateBaseInfo.birthDate).format('YYYY-MM-DD')
                    : '--'}
                </Description>
                <Description term="电话">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.mobile
                    ? datailInfo.updateBaseInfo.mobile
                    : '--'}
                </Description>
                <Description term="员工邮箱">
                  {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.email
                    ? datailInfo.updateBaseInfo.email
                    : '--'}
                </Description>
              </DescriptionList>
            </Form>
          </Card>
          {adjType === '6' && (
            <Card
              title={
                <div style={{ position: 'relative' }}>
                  报价单变化
                  <p style={{ position: 'absolute', top: '0', right: '0', fontWeight: 400 }}>
                    <span style={{ fontWeight: 400, fontSize: 12, margin: '0 40px 0 0' }}>
                      操作人：
                      {datailInfo.operName || '--'}
                    </span>
                    <span style={{ fontWeight: 400, fontSize: 12 }}>
                      操作时间：
                      {(datailInfo.operTime &&
                        moment(datailInfo.operTime).format('YYYY-MM-DD HH:mm')) ||
                        '--'}
                    </span>
                  </p>
                </div>
              }
              id="quoinfo"
            >
              {datailInfo.addPds || datailInfo.cutPds || datailInfo.updPds ? (
                <div>
                  {datailInfo.addPds && (
                    <div>
                      <h4 style={{ fontWeight: 'bolder' }}>增加产品</h4>
                      <Table
                        dataSource={datailInfo.addPds || []}
                        columns={quoAddColumns}
                        rowKey={(_, index) => index}
                        pagination={false}
                        style={{ width: 800 }}
                      />
                    </div>
                  )}
                  {datailInfo.cutPds && (
                    <div style={{ marginTop: 20 }}>
                      <h4 style={{ fontWeight: 'bolder' }}>减少产品</h4>
                      <Table
                        dataSource={datailInfo.cutPds || []}
                        columns={quoRedColumns}
                        rowKey={(_, index) => index}
                        pagination={false}
                        style={{ width: 800 }}
                      />
                    </div>
                  )}
                  {datailInfo.updPds && (
                    <div style={{ marginTop: 20 }}>
                      <h4 style={{ fontWeight: 'bolder' }}>价格变化</h4>
                      <Table
                        dataSource={datailInfo.updPds || []}
                        columns={quoPriceColumns}
                        rowKey={(_, index) => index}
                        pagination={false}
                        style={{ width: 800 }}
                      />
                    </div>
                  )}
                </div>
              ) : (
                '暂无数据'
              )}
            </Card>
          )}
          {/* 社保公积金信息  暂不考虑五险合不合一 */}
          {adjType === '6' && datailInfo.serDto && (
            <Card title={<span id="socialsecurityinf">社保公积金信息</span>}>
              <Table
                dataSource={(datailInfo.serDto && datailInfo.serDto.detailSerDtos) || []}
                columns={insAccuInfoColumns}
                rowKey={(_, index) => index}
                pagination={false}
              />
            </Card>
          )}

          {(adjType === '1' || adjType === '2') && (
            <Card
              title={
                <div style={{ position: 'relative' }}>
                  <span style={{ fontWeight: 900 }}>
                    {adjType === '1' ? '社保申报调整信息' : '公积金申报调整信息'}
                  </span>

                  <p style={{ position: 'absolute', top: '0', right: '0', fontWeight: 400 }}>
                    <span style={{ fontWeight: 400, fontSize: 12, margin: '0 40px 0 0' }}>
                      操作人：
                      {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.operName
                        ? datailInfo.updateBaseInfo.operName
                        : null}
                    </span>
                    <span style={{ fontWeight: 400, fontSize: 12 }}>
                      操作时间：
                      {datailInfo.updateBaseInfo && datailInfo.updateBaseInfo.operTime
                        ? moment(datailInfo.updateBaseInfo.operTime).format('YYYY-MM-DD HH:mm')
                        : null}
                    </span>
                  </p>
                </div>
              }
            >
              <Form>
                {adjType === '1' ? (
                  <div>
                    {datailInfo.updateInsIde && datailInfo.updateInsIde.oldInsIdeName ? (
                      <div>
                        <DescriptionList style={{ marginBottom: 24 }}>
                          <Description>缴费人员类别</Description>
                        </DescriptionList>
                        <DescriptionList style={{ margin: '0 0 24px 60px' }}>
                          <Description term="缴费人员类别">
                            {datailInfo.updateInsIde && datailInfo.updateInsIde.oldInsIdeName
                              ? datailInfo.updateInsIde.oldInsIdeName
                              : '--'}
                          </Description>
                        </DescriptionList>
                        <div style={{ borderBottom: '1px dashed #ccc', margin: '20px 0' }} />
                      </div>
                    ) : null}
                  </div>
                ) : null}

                {datailInfo.updateInsPdDecWage &&
                datailInfo.updateInsPdDecWage.updateInsDecWageList ? (
                  <DescriptionList style={{ marginBottom: 24 }}>
                    <Description>{adjType === '1' ? '社保申报工资' : '申报工资'}</Description>
                  </DescriptionList>
                ) : null}
                <div>
                  <div>
                    {datailInfo.updateInsPdDecWage &&
                    datailInfo.updateInsPdDecWage.updateInsDecWageList ? (
                      <DescriptionList style={{ marginBottom: 24 }}>
                        {datailInfo.updateInsPdDecWage.updateInsDecWageList.map(item => (
                          <DescriptionList style={{ margin: '0 0 24px 60px' }}>
                            <Description term={item.assName}>
                              {item.oldInsDecWage ? item.oldInsDecWage.toFixed(2) : null}
                            </Description>
                          </DescriptionList>
                        ))}
                      </DescriptionList>
                    ) : null}
                  </div>

                  {datailInfo.updateAccuDecWage &&
                  datailInfo.updateInsPdDecWage &&
                  datailInfo.updateInsPdDecWage.updateInsDecWageList ? (
                    <div style={{ borderBottom: '1px dashed #ccc', margin: '20px 0' }} />
                  ) : null}

                  {datailInfo.updateAccuDecWage ? (
                    <div>
                      <DescriptionList style={{ marginBottom: 24 }}>
                        <DescriptionList style={{ margin: '0 0 24px 60px' }}>
                          <Description term="申报工资">
                            {datailInfo.updateAccuDecWage.oldAccuDecWage}
                          </Description>
                        </DescriptionList>
                      </DescriptionList>
                    </div>
                  ) : null}
                </div>

                {(datailInfo.updateAccuDecWage &&
                  datailInfo.updateAccuDecWage.oldAccuDecWage &&
                  datailInfo.updateAdjInsLocPkgList &&
                  datailInfo.updateAdjInsLocPkgList.length) ||
                (datailInfo.updateAccuLocPkg &&
                  datailInfo.updateAccuDecWage &&
                  datailInfo.updateAccuDecWage.oldAccuDecWage) ? (
                  <div style={{ borderBottom: '1px dashed #ccc', margin: '20px 0' }} />
                ) : null}

                {(datailInfo.updateAdjInsLocPkgList && datailInfo.updateAdjInsLocPkgList.length) ||
                datailInfo.updateAccuLocPkg ? (
                  <div>
                    <DescriptionList style={{ marginBottom: 24 }}>
                      <Description>{adjType === '1' ? '社保组合' : '公积金组合'}</Description>
                    </DescriptionList>
                  </div>
                ) : null}

                <div>
                  {adjType === '1' ? (
                    <div>
                      {datailInfo.updateAdjInsLocPkgList &&
                      datailInfo.updateAdjInsLocPkgList.length ? (
                        <div>
                          <Table
                            style={{ width: 600 }}
                            columns={insGroupColumns}
                            dataSource={datailInfo.updateAdjInsLocPkgList}
                            rowKey="ass"
                            bordered
                            size="middle"
                            pagination={false}
                          />
                        </div>
                      ) : null}
                    </div>
                  ) : (
                    <div>
                      {datailInfo.updateAccuLocPkg ? (
                        <div>
                          <Table
                            style={{ width: 600 }}
                            columns={insGroupColumns}
                            dataSource={newUpdateAccuLocPkg}
                            rowKey="ass"
                            bordered
                            size="middle"
                            pagination={false}
                          />
                        </div>
                      ) : null}
                    </div>
                  )}
                </div>
              </Form>
              {datailInfo.beginDate && (
                <div>
                  <div style={{ borderBottom: '1px dashed #ccc', margin: '20px 0' }} />
                  <DescriptionList style={{ marginTop: 16 }}>
                    <Description term="生效日期">
                      {datailInfo && datailInfo.beginDate
                        ? moment(datailInfo.beginDate).format('YYYY-MM-DD')
                        : '--'}
                    </Description>
                  </DescriptionList>
                </div>
              )}
            </Card>
          )}
          <HdlRemark hdlRemark={datailInfo.handDto} />
          <ProRecording proRecording={datailInfo.probDets} />
          <FooterToolbar style={{ width: '100%' }}>
            <Button style={{ marginRight: 10 }} onClick={() => router.goBack()}>
              返回
            </Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </Spin>
    );
  }
}

export default Problem;
